<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<%@ page import ="com.easyattendance.services.AddTeacherService" %>
<%@ page import ="com.easyattendance.model.Teacher" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teacher - Change Password</title>
<jsp:include page="../includeFiles.jsp" />

</head>

<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkTeacherRole.jsp" />

	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">				
						<div id="login_content">
						<header>
							<h2>Change Password</h2>
						</header>
						<span class="error_msg">${errorMessage}</span>
						<span class="success_msg">${successMessage}</span>
						<!-- js validation Error display -->
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All fields are required.</li>
								<li id="submit_pass_error" class="submit_errors">Password : at least 8 characters, 1 upper-case, number & special character.</li>
								<li id="submit_pass_compare_error" class="submit_errors">Passwords must be similar.</li>
							</ul>
						</div>
						
						<form name="changePasswordForm" action="${pageContext.request.contextPath}/ChangePasswordServlet" method="post" onsubmit="return checkFormErrors();">
							
							<!-- Enter old Password -->
							<div>
								<label>Old Password: <span class="error_msg">*</span></label> 
								<input type="password" id="oldpassword" name="oldpassword" placeholder="Old Password" maxlength="32" tabindex="1" >
								<!-- Compared to stored password using Ajax or Server side Script -->
							</div>
							<!-- Enter new Password -->
							<div>
								<label>New Password: <span class="error_msg">*</span></label> 
								<input id="newpassword"  name="newpassword" type="password" placeholder="New Password" maxlength="32" tabindex="2">
							</div>
							<!-- Password Validation error and success message area. -->
							<div id="pass_error" class="error_info">
								<ul>
									<li id="letter" class="invalid">At least <strong>one letter</strong></li>
									<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
									<li id="number" class="invalid">At least <strong>one number</strong></li>
									<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
									<li id="character" class="invalid">At least <strong>one special character</strong></li>
								</ul>
							</div>
							<!-- Re-enter new Password -->
							<div>
								<label>Confirm Password: <span class="error_msg">*</span></label> 
								<input id="new_repassword" name ="new_repassword" type="password" placeholder="Re-enter Password" maxlength="32" tabindex="3">
							</div>
							<!-- Compare Passwords. -->
							<div id="compare_pass_error" class="error_info">
								<ul>
									<li id="compare_pass" class="invalid">Passwords must be similar & non-empty.</li>
								</ul>
							</div>							
							<div>	
								<input type="submit" value="Change" class="button" tabindex="4">
							</div>
						</form>
					</div>
				
			</div>
		</div>

		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" />

			<jsp:include page="teacherMenu.jsp" />

			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>	
	<script type="text/javascript">
		$(function(){
			$("#generalSettings").addClass("current_page_item");
		});
	</script>
	
	<script type="text/javascript">
	$(".submit_errors_msg").hide();
	$(".submit_errors").hide();
	
	function checkFormErrors(){
		if(isAnyFieldEmpty($('#oldpassword'),$('#newpassword'),$('#new_repassword'))){
			return checkForm($('#submit_pass_error'),$('#submit_pass_compare_error'));
		}
		return false;
	}
	
		$("#email").keyup(function() {
			isEmailValid($("#email"));
		});
		$("#admin_new_password").keyup(function() {
			isPasswordValid($("#admin_new_password"));
		});
		$("#admin_new_repassword").keyup(function() {
			isPasswordSame($("#admin_new_password"),$("#admin_new_repassword"));
		});
	</script>
</body>
</html>